<template>
  <el-dialog :visible.sync="dialogVisible" title="新增渠道" width="900px" :close-on-click-modal="false" v-drag2anywhere>
    <el-form :model="formData" label-width="100px" :rules="rules" ref="formData">
      <el-row>
        <el-col :span="8">
          <el-form-item label="渠道名称:" prop="title">
            <el-input v-model="formData.title" placeholder="请输入渠道名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启用状态:" prop="enabled">
            <el-switch v-model="formData.enabled"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="折扣率:" prop="rate">
            <el-input-number v-model="formData.rate" :precision="2"  :step="0.01"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
            <el-form-item label="排序索引:">
               <el-input-number v-model="formData.order"  :step="1"></el-input-number>  值越大越靠前显示
            </el-form-item>
        </el-col>
      </el-row>
       <el-col>
          <el-form-item label="备注信息:">
              <el-input type="textarea" rows="5" v-model="formData.memo" placeholder="备注信息"></el-input>
          </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="渠道链接:">
          <el-input v-model="formData.website" placeholder="请输入渠道链接地址"></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="渠道登录信息:">
           <el-input type="textarea" rows="5" v-model="formData.webuserinfo" placeholder="渠道登录账号密码信息等"></el-input>
        </el-form-item>
      </el-col>
       </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">提交申请</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          title:'',
          enabled:true,
          order:0,
          rate:0.95,
          website:'',
          webuserinfo:'',
          memo:''
        },
        rules: {
          title: [{
            required: true,
            message: "请选择上架目标平台",
            trigger: "blur"
          }],
          rate: [{
            required: true,
            message: "自采平添折扣率不能为空",
            trigger: "blur"
          }]
        },
        dialogVisible: true
      }
    },
    methods: {
      initData(){
         this.formData={
          title:'',
          enabled:true,
          order:0,
          rate:0.95,
          website:'',
          webuserinfo:'',
          memo:''
        }
       },
      handleSave: function() {
        if(this.$refs.formData.validate((ok)=>{
            if(ok){
              let params={
                 title:this.formData.title,
                 enabled:this.formData.enabled? 1:0,
                 rate:this.formData.rate,
                 order:this.formData.order,
                 memo:this.formData.memo,
                 website:'',
                 webuserinfo:''
              }
              this.axios.post("api/admin/platform/create",params).then((res)=>{
                  if(res.status==200 && res.data.code==0){
                      this.dialogVisible=false;
                      this.$emit("closeHandler");
                  }
              })
            }
        }));
          console.log(this.formData);
      }
    }
  }
</script>

<style>
  .title {
    position: relative;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }

  .title:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 5px;
    height: 65%;
    background-color: #249af3;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
